<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>金源面粉厂</title>
    <script src="../../static/js/jquery.min.js"></script>
    <link rel="stylesheet" href="css/comon0.css">
    <style>
        .grid {
            margin-top: 5%;
            width: 80%;
            height: 10px;
            display: grid;
            grid-template-columns: repeat(20, 1fr);
            grid-column-gap: 14px;
        }

        .line {
            position: relative;
            width: 90%;
            height: 7px;
        }

        .line::before, .line::after {
            content: '';
            position: absolute;
            width: 4.5rem;
            height: 100%;
            border-radius: 7px;
            background-color: #FF0000;
        }

        .line::before {
            animation: first-line ease-in-out 4s var(--delay) infinite alternate;
        }

        .line::after {
            bottom: 0;
            background-color: #B22222;
            width: calc(80% - 10px);
            animation: second-line ease-in-out 4s var(--delay) infinite alternate;
        }

        .line:nth-child(1) {
            --delay: calc(-0.1s);
        }


        @keyframes first-line {
            70% {
                width: calc(80% - 10px);
            }
            100% {
                background-color: #FF0000;
            }
        }


    </style>
</head>
<script type="text/javascript">
    $(document).ready(function () {
        var html = $(".wrap ul").html()
        $(".wrap ul").append(html)
        var ls = $(".wrap li").length / 2 + 1
        i = 0
        ref = setInterval(function () {
            i++
            if (i == ls) {
                i = 1
                $(".wrap ul").css({
                    marginTop: 0
                })
                $(".wrap ul").animate({
                    marginTop: -'.52' * i + 'rem'
                }, 1000)
            }
            $(".wrap ul").animate({
                marginTop: -'.52' * i + 'rem'
            }, 1000)


        }, 2400);


        var html2 = $(".adduser ul").html()
        $(".adduser ul").append(html2)
        var ls2 = $(".adduser li").length / 2 + 1
        a = 0
        ref = setInterval(function () {
            a++
            if (a == ls2) {
                a = 1
                $(".adduser ul").css({
                    marginTop: 0
                })
                $(".adduser ul").animate({
                    marginTop: -'.5' * a + 'rem'
                }, 800)
            }
            $(".adduser ul").animate({
                marginTop: -'.5' * a + 'rem'
            }, 800)


        }, 4300);


    })
</script>
<body style=''>
<div class="loading">
    <div class="loadbox"><img src="images/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <h1>金源面粉厂</h1>
    <div class="weather"><span id="showTime"></span></div>
    <script>
        var t = null;
        t = setTimeout(time, 1000);

        function time() {
            clearTimeout(t);
            dt = new Date();
            var y = dt.getFullYear();
            var mt = dt.getMonth() + 1;
            var day = dt.getDate();
            var h = dt.getHours();
            var m = dt.getMinutes();
            var s = dt.getSeconds();
            document.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
            t = setTimeout(time, 1000);
        }
    </script>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 5.2rem">
                <div class="alltitle">消防主机报警</div>

                <div class="sycm">
                    <ul class="clearfix">
                        <li>
                            <h2>1824</h2><span>本月报警数量</span>
                        </li>
                        <li>
                            <h2>1920</h2><span>上月报警数量</span>
                        </li>
                        <li>
                            <h2>5%</h2><span>环比增长</span>
                        </li>
                    </ul>
                    <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                    <ul class="clearfix">
                        <li>
                            <h2>824</h2><span>主机(20001)</span>
                        </li>
                        <li>
                            <h2>710</h2><span>主机(20003)</span>
                        </li>
                        <li>
                            <h2>200</h2><span>主机(20002)</span>
                        </li>
                    </ul>


                </div>
                <div class="addnew">
                    <div class="tit02"><span>误报种类</span></div>
                    <div class="allnav" style="height: 2.2rem" id="wbzl"></div>
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 4.9rem">
                <div class="alltitle">无线烟感报警</div>
                <div class="allnav" style="height: 1.5rem" id="wxyg"></div>
                <div class="addnew">
                    <div class="tit02"><span>误报种类</span></div>
                    <div class="allnav" style="height: 2.0rem" id="wwbzl"></div>
                </div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox ">
                    <ul class="clearfix">
                        <li class="pulll_left counter">
                            6069
                        </li>
                        <li class="pulll_left counter">410</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">联网单位数量</li>
                        <li class="pulll_left">联网消防主机数量</li>
                    </ul>
                </div>
            </div>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter">81189</li>
                        <li class="pulll_left counter">39410</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">总点位数量</li>
                        <li class="pulll_left">总报警数量</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <div class="map1"><img src="images/lbx.png"></div>
                <div class="map2"><img src="images/jt.png"></div>
                <div class="map3"><img src="images/map.png"></div>
                <div class="map4" id="map_1"></div>
            </div>
            <div class="boxall" style="height: 3.4rem">
                <div class="alltitle">电报警</div>
                <div class="allnav" id="dbj" style="width:7.2rem;height:3rem;margin-top: 0.3rem"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="boxall" style="height:5.2rem">
                <div class="alltitle">燃气报警</div>

                <div class="clearfix">
                    <div class="sy" style="width:300px;" id="yqbj"></div>
                </div>
                <div class="addnew">
                    <div class="tit02"><span>最新报警</span></div>
                    <div class="adduser" style="height: 2.0rem">
                        <ul>
                            <li class="clearfix"><span class="pulll_left">大连市XX医院</span> <span class="pulll_right">一楼 - 吸烟 - 2019-10-11
											09:58:58 </span></li>
                            <li class="clearfix"><span class="pulll_left">大连市XX集团</span> <span class="pulll_right">二楼 - 误报 - 2019-10-11
											09:58:58 </span></li>
                            <li class="clearfix"><span class="pulll_left">开发区医院</span> <span class="pulll_right">三楼 - 粉尘 - 2019-10-11
											09:58:58 </span></li>
                            <li class="clearfix"><span class="pulll_left">时代广场</span> <span class="pulll_right">四楼 - 误报 - 2019-10-11
											09:58:58 </span></li>
                            <li class="clearfix"><span class="pulll_left">海昌物业</span> <span class="pulll_right">四楼 - 误报 - 2019-10-11
											09:58:58 </span></li>
                            <li class="clearfix"><span class="pulll_left">海昌物业</span> <span class="pulll_right">四楼 - 误报 - 2019-10-11
											09:58:58 </span></li>
                        </ul>
                    </div>
                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 1.4rem">
                <div class="alltitle">红外报警</div>
                <div class="grid">
                    <span class="line"></span>
                </div>
                <div>
                    <span style="color: #fff;opacity:.5">本月报警数量 ：</span><span
                        style="color: #DC143C;font-size:.1rem;    font-weight: bold;">809</span>
                    <span style="margin-left:15%;color: #fff;opacity:.5">上月报警数量 ：</span><span
                        style="color: #ffeb7b;font-size:.1rem;    font-weight: old;">109</span>

                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.4rem">
                <div class="alltitle">水报警</div>
                <div class="allnav" style="height: 3.0rem" id="sbj"></div>

                <div class="boxfoot"></div>
            </div>
        </li>
    </ul>

</div>
<div class="back"></div>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="js/echarts-gl.min.js"></script>
<script language="JavaScript" src="js/echarts-tool.js"></script>
<script type="text/javascript" src="js/timelineOption.js"></script>


<script type="text/javascript">

</script>
<script type="text/javascript" src="js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="js/jquery.countup.min.js"></script>
<script type="text/javascript">
    $('.counter').countUp();
</script>

</body>
</html>
